<template>
  <div class="baseinfo c-shadow">
    <jTabNav :items="tabList"></jTabNav>
    <h4 class="detail-base-title d_jump" ref="baseinfo1">注册信息<span>1</span></h4>
    <div class="table-wrap">
      <table class="business">
        <tr>
          <th>统一社会信用代码</th>
          <td>{{businessData.societyCode ||'--'}}</td>
          <th>法定代表人</th>
          <td>{{businessData.legalPerson ||'--'}}</td>
        </tr>
        <tr>
          <th>注册资金</th>
          <td>{{businessData.money | money}} {{businessData.moneyCurrency || ''}}</td>
          <th>企业类型</th>
          <td>{{businessData.type ||'--'}}</td>
        </tr>
        <tr>
          <th>成立日期</th>
          <!-- TODO: -->
          <td>{{businessData.registerDate | dateFormat}}</td>
          <th>核准日期</th>
          <!-- TODO: -->
          <td>{{businessData.approvalDate | dateFormat}}</td>
        </tr>
        <tr>
          <th>企业地址</th>
          <td>{{businessData.location ||'--'}}</td>
          <th>营业期限</th>
          <td>自{{businessData.operatingPeriodStart | dateFormat}}至{{businessData.operatingPeriodEnd | dateFormat}}</td>
        </tr>
        <tr>
          <th>登记机关</th>
          <td>{{businessData.registerOrganization ||'--'}}</td>
          <th>登记状态</th>
          <td>{{businessData.registerStatus ||'--'}}</td>
        </tr>
        <tr>
          <th>经营范围</th>
          <td colspan="3" class="long">{{businessData.businessScope ||'--'}}</td>
        </tr>
        <tr>
          <th>所属行业</th>
          <td colspan="3" class="long">
            <!-- {{businessData.entId ||'--'}} -->
            --
          </td>
        </tr>
        <tr>
          <th>电子邮箱</th>
          <td>{{businessData.entEmail||'--'}}</td>
          <th>所属区域</th>
          <td>{{businessData.address | address}}</td>
        </tr>
      </table>
    </div>
    <h4 class="detail-base-title d_jump" ref="baseinfo2">股东信息<span>{{shareholderPager.total || 0}}</span></h4>
    <j-no-data v-if="shareholderData.length === 0" :mode="'b'" msg="b"></j-no-data>
    <div v-else class="table-wrap">
      <table>
        <thead>
          <tr>
            <th v-for="title in shareholderTitle" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in shareholderData" :key="index">
            <td>
              <router-link tag="a" target="_blank" :to="{name:'baseinfoa', query: {entname:item.name}}" class="blue">
                {{item.name || '--'}}
              </router-link>
            </td>
            <td>{{item.type || '--'}}</td>
            <td>
                {{item.certificate_type || '--'}}
              <p>
                {{item.certificate_code || '--'}}
              </p>
            </td>
            <!-- 持股比例没数据 -->
            <td>{{item.shareholdingRatio | tobili}}</td>
            <td>
              <!-- {{item.subscribedAmount || '--'}} -->
              {{item.subcribeDetail.length !== 0 ? item.subcribeDetail[0].subscribed_amount || '--' : '--' | character}}
            </td>
            <td>
              <!-- {{item.subscribedDate || '--'}} -->
              {{item.subcribeDetail.length !== 0 ? item.subcribeDetail[0].subscribed_date || '--' : '--' | character}}
            </td>
            <td>
              <!-- {{item.subscribedType || '--'}} -->
              {{item.subcribeDetail.length !== 0 ? item.subcribeDetail[0].subscribed_type || '--' : '--' | character}}
            </td>
            <td>
              <!-- {{item.paidAmount || '--'}} -->
              {{item.paidDetail.length !== 0 ? item.paidDetail[0].paid_amount || '--' : '--' | character}}
            </td>
            <td>
              <!-- {{item.paidDate || '--'}} -->
              {{item.paidDetail.length !== 0 ? item.paidDetail[0].paid_date || '--' : '--' | character}}
            </td>
            <td>
              <!-- {{item.paidType || '--'}} -->
              {{item.paidDetail.length !== 0 ? item.paidDetail[0].paid_type || '--' : '--' | character}}
            </td>
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="shareholderPager.total>10"
          class="fr "
          @current-change="shareholderPaging"
          :current-page.sync="shareholderPager.pageNum"
          :page-size="shareholderPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="shareholderPager.total">
        </el-pagination>
      </div>
    </div>
    <h4 class="detail-base-title d_jump" ref="baseinfo3">主要人员<span>{{majorPersonPager.total || 0}}</span></h4>
    <j-no-data v-if="majorPerson.length === 0" :mode="'b'" msg="b"></j-no-data>
    <div v-else class="table-wrap">
      <ul class="major-person">
        <li v-for="(item, index) in majorPerson" :key="index">
          <router-link tag="a" target="_blank" :to="{name:'enterPrise1', query: {legalPerson:item.name}}" class="blue rebFont">
            {{item.name || '--'}}
            <span>{{item.department || '--'}}</span>
          </router-link>
        </li>
      </ul>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="majorPersonPager.total>10"
          class="fr "
          @current-change="shareMajorPersonPager"
          :current-page.sync="majorPersonPager.pageNum"
          :page-size="majorPersonPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="majorPersonPager.total">
        </el-pagination>
      </div>
    </div>
    <h4 class="detail-base-title d_jump" ref="baseinfo4">分支机构信息<span>{{branchInfoPager.total || 0}}</span></h4>
    <div v-if="branchInfoData.length !== 0" class="table-wrap">
      <ul class="embranchment">
          <li v-for="(item, index) in branchInfoData" :key="index">
            <h5>
              <i></i>
              <router-link tag="a" target="_blank" :to="{name:'baseinfoa', query: {entname:item.organizationName}}">
                {{item.organizationName || '--'}}
              </router-link>
            </h5>
            <div class="text"></div>
          </li>
      </ul>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="branchInfoPager.total>10"
          class="fr "
          @current-change="shareBranchInfoPager"
          :current-page.sync="branchInfoPager.pageNum"
          :page-size="branchInfoPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="branchInfoPager.total">
        </el-pagination>
      </div>
    </div>
    <div v-else>
      <j-no-data :mode="'b'" msg="b"></j-no-data>
    </div>
    <h4 class="detail-base-title d_jump" ref="baseinfo5">企业变更<span>{{businessPager.total || 0}}</span></h4>
    <j-no-data v-if="businessChangeData.length === 0" :mode="'b'" msg="s"></j-no-data>
    <div v-else class="table-wrap">
      <table class="business-change gsbg">
        <thead>
          <tr>
            <th v-for="title in businessChange" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in businessChangeData" :key="item.before">
            <td class="text-c" width=74>{{index + 1}}</td>
            <td class="text-c">{{item.changeDate | dateFormat}}</td>
            <td class="text-c">{{item.changeItem || '--'}}</td>
            <td>{{item.changeBefore || '--'}}</td>
            <td>{{item.changeAfter || '--'}}</td>
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="businessPager.total>10"
          class="fr "
          @current-change="entchangePaging"
          :current-page.sync="businessPager.pageNum"
          :page-size="businessPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="businessPager.total">
        </el-pagination>
      </div>
    </div>
    <h4 class="detail-base-title d_jump" ref="baseinfo6">海关注册信息<span>{{crInformationPager.total || 0}}</span></h4>
    <div v-if="crInformationPager.total !== 0" class="table-wrap">
      <table class="business-change">
        <thead>
          <tr>
            <th v-for="title in crInformation" :key="title">{{title}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in crInformationData" :key="item.before">
            <td class="text-c">{{index + 1}}</td>
            <td class="text-c">{{item.customCode || '--'}}</td>
            <td class="text-c">{{item.reportType || '--'}}</td>
            <td class="text-c">{{item.enterpriseAdminType || '--'}}</td>
            <td class="text-c">{{item.registrationPeriod || '--'}}</td>
          </tr>
        </tbody>
      </table>
      <div class="clearFix paging-wrap">
        <el-pagination
        v-if="crInformationPager.total>10"
          class="fr "
          @current-change="shareCrInformationPager"
          :current-page.sync="crInformationPager.pageNum"
          :page-size="crInformationPager.pageSize"
          layout="prev, pager, next, jumper"
          :total="crInformationPager.total">
        </el-pagination>
      </div>
    </div>
    <div v-else>
      <j-no-data :mode="'b'" msg="b"></j-no-data>
    </div>
  </div>
</template>
<script>
import { entdetail as api } from '../../api'
import { jTabNav, jNoData } from '../../components'
export default {
  data() {
    return {
      // 分页的当前页数
      tabList: [],
      currentPage3: 1,
      shareholderTitle: [
        '股东',
        '股东类型',
        '证照 / 证件',
        '持股比例(%)',
        '认缴出资金额(万元)',
        '认缴出资时间',
        '认缴出资方式',
        '实缴出资金额(万元)',
        '实缴出资时间',
        '实缴出资方式'
      ],
      businessChange: ['序号', '变更日期', '变更事项', '变更前', '变更后'],
      businessData: {},
      majorPerson: [],
      shareholderData: [],
      businessChangeData: [],
      // 海关注册
      crInformation: ['序号', '海关编码', '报关类别', '企业管理类别', '注册有效期'],
      branchInfoData: [], // 分支机构
      crInformationData: [], // 海关注册
      branchInfoPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      }, // 分支机构
      // 主要人员
      majorPersonPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      // 股东信息
      shareholderPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      // 工商变更
      businessPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      // 海关注册
      crInformationPager: {
        total: 0,
        pageSize: 10,
        pageNum: 1
      },
      params: {
        pageSize: 10,
        pageNum: 1
      },
      gsxx: 0,
      gdxx: 0,
      zyry: 0,
      fzjg: 0,
      gsbg: 0,
      hgzc: 0
    }
  },
  mounted() {
    this.params.entName = this.shareholderPager.entName = this.majorPersonPager.entName = this.branchInfoPager.entName = this.businessPager.entName = this.crInformationPager.entName = this.$route.query.entname
    this.params.entId = 1
    this.getbusinessData() // 工商信息
    this.getshareHolder() // 股东信息
    this.getMajorperson() // 主要人员
    this.getEntBranchInfoList() // 分支机构
    this.getEntchange() // 工商变更
    this.getRealTimeDataEntCustom() // 海关注册
  },
  methods: {
    handleSizeChange() {
      // 当pagesize改变的时候出发该函数
    },
    handleCurrentChange() {
      // 当切换页码的时候出发的函数
    },
    // 工商信息
    getbusinessData() {
      api.getBusinessInfo(this.params).then(ret => {
        this.tabList.push({
          idx: 1,
          name: '注册信息',
          num: ret.data.entName ? 1 : 0,
          offsetTop: this.$refs['baseinfo1'].offsetTop || 0
        })
        if (!ret.data) return false
        this.businessData = ret.data
      }).catch(err => {
        console.log(err)
        this.tabList.push({
          idx: 1,
          name: '注册信息',
          num: 0,
          offsetTop: this.$refs['baseinfo1'].offsetTop || 0
        })
      })
    },
    // 股东信息    后改  getshareHolder
    getshareHolder(param) {
      if (param) {
        this.shareholderPager = Object.assign(this.shareholderPager, param)
      }
      api.getEntShareholderInvestmentInfoList(this.shareholderPager).then(ret => {
        if (!this.gdxx) {
          this.tabList.push({
            idx: 2,
            name: '股东信息',
            num: ret.data.total || 0,
            offsetTop: this.$refs['baseinfo2'].offsetTop || 0
          })
        }
        ++this.gdxx
        if (!ret.data) return false
        this.shareholderData = ret.data.list
        this.shareholderPager.total = ret.data.total
        // this.shareholderData.forEach(item => {
        //   if (item.paid_amount) {
        //     item.paid_amount = item.paid_amount.replace(/(null)*( )*(;)*/g, '')
        //   }
        //   if (item.paid_date) {
        //     item.paid_date = item.paid_date.replace(/(null)*( )*(;)*/g, '')
        //   }
        //   if (item.subscribed_amount) {
        //     item.subscribed_amount = item.subscribed_amount.replace(
        //       /(null)*( )*(;)*/g,
        //       ''
        //     )
        //   }
        //   if (item.subscribed_date) {
        //     item.subscribed_date = item.subscribed_date.replace(
        //       /(null)*( )*(;)*/g,
        //       ''
        //     )
        //   }
        // })
      }).catch(err => {
        console.log(err)
        if (!this.gdxx) {
          this.tabList.push({
            idx: 2,
            name: '股东信息',
            num: 0,
            offsetTop: this.$refs['baseinfo2'].offsetTop || 0
          })
        }
        ++this.gdxx
      })
    },
    // 主要人员    后改 getMajorperson
    getMajorperson(param) {
      if (param) {
        this.majorPersonPager = Object.assign(this.majorPersonPager, param)
      }
      api.getEntMajorPersonInfoList(this.majorPersonPager).then(ret => {
        if (!this.zyry) {
          this.tabList.push({
            idx: 3,
            name: '主要人员信息',
            num: ret.data.total || 0,
            offsetTop: this.$refs['baseinfo3'].offsetTop || 0
          })
        }
        ++this.zyry
        if (!ret.data) return false
        var data = ret.data.list
        this.majorPerson = data
        this.majorPersonPager.total = ret.data.total
        // if (data.length > 0) {
        //   for (var i = 0; i < data.length; i += 2) {
        //     var item = {
        //       department: data[i].department,
        //       name: data[i].name,
        //       department1: i + 1 < data.length ? data[i + 1].department : null,
        //       name1: i + 1 < data.length ? data[i + 1].name : null
        //     }
        //     this.majorPerson.push(item)
        //   }
        //   // console.log(this.majorPerson)
        // }
      }).catch(err => {
        console.log(err)
        if (!this.zyry) {
          this.tabList.push({
            idx: 3,
            name: '主要人员信息',
            num: 0,
            offsetTop: this.$refs['baseinfo3'].offsetTop || 0
          })
        }
        ++this.zyry
      })
    },
    // 分支机构
    getEntBranchInfoList(param) {
      if (param) {
        this.branchInfoPager = Object.assign(this.branchInfoPager, param)
      }
      api.getEntBranchInfoList(this.branchInfoPager).then(ret => {
        if (!this.fzjg) {
          this.tabList.push({
            idx: 4,
            name: '分支机构信息',
            num: ret.data.total,
            offsetTop: this.$refs['baseinfo4'].offsetTop || 0
          })
        }
        ++this.fzjg
        if (!ret.data) return false
        this.branchInfoData = ret.data.list
        this.branchInfoPager.total = ret.data.total
      }).catch(err => {
        console.log(err)
        if (!this.fzjg) {
          this.tabList.push({
            idx: 4,
            name: '分支机构信息',
            num: 0,
            offsetTop: this.$refs['baseinfo4'].offsetTop || 0
          })
        }
        ++this.fzjg
      })
    },
    // 工商变更
    getEntchange(param) {
      if (param) {
        this.businessPager = Object.assign(this.businessPager, param)
      }
      api.getEntchange(this.businessPager).then(ret => {
        if (!this.gsbg) {
          this.tabList.push({
            idx: 5,
            name: '企业变更',
            num: ret.data.length || 0,
            offsetTop: this.$refs['baseinfo5'].offsetTop || 0
          })
        }
        ++this.gsbg
        if (!ret.data) return false
        ret.data.map(ele => {
          if (!ele) {
            ele = '--'
          }
        })
        this.businessChangeData = ret.data
        this.businessPager.total = ret.data.length
      }).catch(err => {
        console.log(err)
        if (!this.gsbg) {
          this.tabList.push({
            idx: 5,
            name: '企业变更',
            num: 0,
            offsetTop: this.$refs['baseinfo5'].offsetTop || 0
          })
        }
        ++this.gsbg
      })
    },
    // 海关注册
    getRealTimeDataEntCustom(param) {
      if (param) {
        this.crInformationPager = Object.assign(this.crInformationPager, param)
      }
      api.getRealTimeDataEntCustom(this.crInformationPager).then(ret => {
        if (!this.hgzc) {
          this.tabList.push({
            idx: 6,
            name: '海关注册信息',
            num: ret.data.total || 0,
            offsetTop: this.$refs['baseinfo6'].offsetTop || 0
          })
        }
        ++this.hgzc
        if (!ret.data) return false
        this.crInformationData = ret.data.list
        this.crInformationPager.total = ret.data.total
      }).catch(err => {
        console.log(err)
        if (!this.hgzc) {
          this.tabList.push({
            idx: 6,
            name: '海关注册信息',
            num: 0,
            offsetTop: this.$refs['baseinfo6'].offsetTop || 0
          })
        }
        ++this.hgzc
      })
    },
    shareBranchInfoPager(index) {
      // 分支机构
      this.branchInfoPager.pageNum = index
      this.getEntBranchInfoList(this.branchInfoPager)
    },
    // 主要人员
    shareMajorPersonPager(index) {
      this.majorPersonPager.pageNum = index
      this.getMajorperson(this.majorPersonPager)
    },
    // 海关注册
    shareCrInformationPager(index) {
      this.crInformationPager.pageNum = index
      this.getRealTimeDataEntCustom(this.crInformationPager)
    },
    // 工商变更
    entchangePaging(index) {
      this.businessPager.pageNum = index
      this.getEntchange(this.businessPager)
    },
    // 股东信息
    shareholderPaging(index) {
      this.shareholderPager.pageNum = index
      this.getshareHolder(this.shareholderPager)
    }
  },
  components: {
    jTabNav,
    jNoData
  }
}
</script>
<style lang="scss" scoped>
.baseinfo {
  padding: 28px 40px;
  font-size: 14px;
  a {
    text-decoration: none;
  }
  .blue {
    color: #57ADE7;
  }
  .text-left {
    text-align: left;
    padding-left: 20px;
  }
  // padding: 0 20px;
  h4.detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 0 12px;
    position: relative;
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
  }
  h4.detail-base-title span {
    border: 1px solid #9dc5fd;
    border-radius: 10px;
    color: #1688f3;
    background: #f2f7ff;
    font-size: 12px;
    padding: 0 10px;
    margin-left: 15px;
    vertical-align: top;
  }
  .table-wrap {
    padding: 30px 20px;
    ul{
      &.major-person {
        width: 100%;
        margin-left: 1px;
        padding: 0;
        li {
          float: left;
          line-height: 20px;
          text-align: center;
          overflow: hidden;
          width: 18%;
          display:inline-block; 
          padding: 15px 10px;
          border: 1px solid #e2e2e2;
          color: #57ADE7;
          a{
            color: #57ADE7;
            cursor: pointer;
            span{
              color: #242424;
              display: block;
            }
          }
        }
        li:hover {
            background: #57ADE7;
            color: #fff;
            a{
              color: #fff;
              cursor: pointer;
              span{
                color: #fff;
              }
            }
        }
      }
      &.embranchment {
        width: 100%;
        li {
            float: left;
            margin: 0.5%;
            width: 45%;
            overflow: hidden;
            display: inline-block;
            border: 1px solid #ccc;
            list-style: none;
            display: list-item;
            text-align: left;
            h5 {
              font-size: 14px;
              padding-left: 20px;
              line-height: 30px;
              margin: 20px 0 0 0;
              i {
                width: 30px;
                height: 30px;
                float: left;
                border-radius: 15px;
                display: inline-block;
                background: #fbe4da;
                margin-right:10px; 
              }
              a {
                cursor: pointer;
                background-color: transparent;
              }
            }
            .text {
              width: 100%;
              // height: 20px;
              margin: 10px 0;
              padding: 20px;
              background: #f4f4f4;
            }
          }
      }
    }
    table {
      border-collapse: collapse;
      width: 100%;
      text-align: center;
      tr:hover {
        background: #f3f8ff;
      }
      td,
      th {
        border: 1px solid #e2e2e2;
        line-height: 36px;
      }
      th {
        line-height: 36px;
        color: #999;
        background: #f2f1f1;
      }
      td.long {
        text-align: left;
        padding: 10px;
        line-height: 24px;
      }
      &.business {
        th {
          width: 232px;
        }
        td {
          text-align: left;
          padding-left: 20px;
        }
      }
      &.business-change {
        th,
        td {
          line-height: 16px;
          padding: 10px 18px;
          word-wrap: break-word;
          word-break: break-all;
          white-space: normal;
        }
        th:first-child {
          width: 50px;
        }
        th:nth-of-type(2) {
          width: 100px;
        }
        td {
          text-align: left;
        }
        td.text-c {
          text-align: center;
        }
      }
      &.gsbg {
        th:nth-of-type(3) {
          width: 120px;
        }
      }
    }
  }
}
</style>



// WEBPACK FOOTER //
// src/view/clib/baseInfo.vue